<template>
  <div>
    <avue-crud :data="productSourceList"
               :option="option"
               :page.sync="page"
               @current-change="currentChange"
               @size-change="sizeChange"
               :table-loading=loading
               @on-load="onLoad">
      <template slot="menu" slot-scope="scope">
        <!--                <el-button type="text" style="font-size: 12px;">-->
        <!--                    管理货源-->
        <!--                </el-button>-->
        <!--                <el-button type="text" style="font-size: 12px;" @click="productSourceClick(scope.row)">-->
        <!--                    采购链接-->
        <!--                </el-button>-->
      </template>
      <template slot="product_name" slot-scope="scope">
        <div>
          <span>广州春卡里克贸易有限公司(备注:占位)</span>
        </div>
      </template>
      <template slot="slot-img" slot-scope="scope">
        <!-- 第一部分 -->
        <div>
          <div>
            <div class="imgBox">
              <div>
                <!-- 图片位置 -->
                <img class="img" :src="getImageUrl(scope.row.image.images)"/>
              </div>
              <div class="imgBox_info">
                <!-- 图片信息 -->
                <div><span>{{ scope.row.subject }}</span></div>
                <!-- 货号 -->
                <div v-if=""><span>商品ID：</span><span>{{ scope.row.productID }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template slot="product_source" slot-scope="scope">
        <div>
          <span>暂无货源</span>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import {getProduceSourcePage, getProductListByTicket, shopSelect, addBaseUrl} from '@/api/product_source/product_source'
import {mapGetters, mapMutations} from 'vuex';

export default {
  name: 'TicketSystemAdminContent',

  props: {
    contentformValue: {
      type: String,
      default: ''
    },
    productSourceList: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      page: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        total: 0,
      },
      data: [],
      option: {
        addBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '店铺名称',
            prop: 'product_name'
          },
          {
            label: "商品信息",
            prop: "slot-img",
            headerAlign: "center",
            minWidth: "80",
            slot: true
          },
          {
            label: '商品源',
            prop: 'product_source'
          }
        ]
      },
      loading: true,
      contentformValueTemp: '' // 避免store没有出现导致问题
    };
  },

  computed: {
    ...mapGetters('productSource', ['GET_PRODUCT_ID_VALUE', 'GET_PRODUCT_SOURCE_SHOP_ID']),
    getImageUrl() {
      return (imageArr) => {
        const baseUrl = "https://cbu01.alicdn.com/"
        return baseUrl + imageArr[0]
      }
    }
  },

  mounted() {
    this.contentformValueTemp = this.contentformValue
    this.getProductList()
    // this.getProductListByTicket()
  },

  methods: {
    ...mapMutations('productSource', ['UPDATE_PRODUCT_SOURCE_SHOP_ID', 'UPDATE_PRODUCT_ID_VALUE']),
    currentChange(page) {
      this.loading = true
      this.page.currentPage = page
      this.getProductList()
    },
    async productSourceClick(row) {
      // 为当前添加基础采购链接的
      const {data} = await addBaseUrl(row.id)
      // 如果成功
      this.$message.success("添加采购链接成功")
    },
    sizeChange(page) {
      this.loading = true
      this.page.pageSize = page
      this.getProductList()
    },
    async getProductListByTicket() {
      const {data} = await getProductListByTicket(this.page.currentPage, this.page.pageSize)
    },
    async getProductList() {
      const shopdData = await shopSelect()
      if (shopdData?.data?.data) {
        this.formValue = shopdData?.data?.data[0]?.value
        this.contentformValue = this.formValue
        this.UPDATE_PRODUCT_ID_VALUE(this.formValue)
      }
      this.UPDATE_PRODUCT_SOURCE_SHOP_ID(shopdData?.data?.data)
      const {data} = await getProduceSourcePage(this.page.currentPage, this.page.pageSize, this.formValue)
      if (data) {
        this.loading = false
        this.productSourceList = data.data.resultList
        this.page.total = data.data.totalRecords
      } else {
        setTimeout(() => {
          this.loading = false
        }, 5000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;

  .imgBox_info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-left: 15px;
    text-align: left;

    & > div {
      width: 100% !important;
      margin: 15px 0;
    }
  }

  .img {
    max-width: 120px;
    max-height: 120px;
  }
}
</style>
